<template>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="收藏的视频" name="first">
            <section class="HotVideo">


                <div class="movie-grid">
                    <div v-for="(movie, index) in movies" :key="index" class="movie-item">
                        <el-image :src="movie.image" style="    width: 100%;border-radius: 10px;
height: 54%;">

                        </el-image>
                        <div class="movie-info">
                            <a style="display: block;
    line-height: 20px;
    height: 38px;
    margin-top: 6px;
    overflow: hidden;
    color: inherit;
    

    "> {{ movie.description }}</a>
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <p>收藏于:3月14日</p>
                                <el-link class="discollect-btn" :underline="false">取消收藏</el-link>
                            </div>




                        </div>

                    </div>
                </div>

            </section>
        </el-tab-pane>
        <el-tab-pane label="收藏的房间" name="second">
            <section class="HotVideo">


                <div class="movie-grid">
                    <div v-for="(movie, index) in movies" :key="index" class="movie-item">
                        <el-image :src="movie.image" style="    width: 100%;border-radius: 10px;
height: 54%;">

                        </el-image>
                        <div class="movie-info">
                            <el-row style="align-items: center;height: 40px;" justify="start">
                                <el-col :span="3">

                                    <el-avatar :size="24" src="/touxiang.jpg" />
                                </el-col>
                                <el-col :span="8">
                                    <p>{{ movie.title }}</p>

                                </el-col>
                            </el-row>

                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <p>收藏于:3月14日</p>
                                <el-link class="discollect-btn" :underline="false">删除收藏</el-link>
                            </div>




                        </div>

                    </div>
                </div>

            </section>
        </el-tab-pane>

    </el-tabs>
</template>
<script lang="ts" setup>

import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const movies = ref([
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈好看好看哈哈哈'

    },
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }
    ,
    {
        image: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        title: '来自星星',
        description: '好看好看哈哈哈'

    }

])
</script>
<style scoped>
/* ::v-deep.demo-tabs > .el-tabs__content {
    padding: 32px;
    color: #17bd38!important;
    font-size: 32px;
    font-weight: 600;
  } */

::v-deep .el-tabs__item.is-active {
    color: #fe2c55;
}

::v-deep .el-tabs__item {
    color: white;
}

::v-deep .el-tabs__item:hover {
    color: #4670b8;
}

/* 
布局 */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);

    grid-column-gap: 20px;
    grid-row-gap: 40px;
    margin-top: 10px;
}



.movie-info {
    position: relative;
    padding: 10px;
}

.discollect-btn {

    color: rgb(170, 166, 166);

}

.discollect-btn :hover {

    color: #fe2c55;
    border: none;

}
</style>